figure.Container = new Class({
    Extends: figure.DomFigure,

    initialize: function(id, css, type) {
        this.parent(id);
        this._parseType(type);
        this.createElement('canvas',{
            id: id,
            Width: this.sizes.WIDTH*2,
            Height: this.sizes.HEIGHT_TOTAL + 5, //pequeño offset
            css: css
        });
        this.element = this.getElement();

        this.writeTag(css.top + this.sizes.HEIGHT_TOTAL / 2, css.left, this.sizes.WIDTH);
    },

    draw: function() {
        var y;
        var x = y = this.sizes.WIDTH / 2 + 1
        var context = this.element[0].getContext('2d');
        context.fillStyle = this._createGradient(context);
        // cupula
        context.beginPath();
        context.arc(this.sizes.WIDTH/2, this.sizes.WIDTH/2 +1, this.sizes.WIDTH/2, 0, Math.PI, true);
        context.fill();
        context.stroke();
        // body
        context.moveTo(0, y);
        context.lineTo(0,                          y + this.sizes.HEIGHT_BODY);
        context.lineTo(x - 5, y + this.sizes.HEIGHT_BODY + this.sizes.HEIGHT_BOTTOM);
        context.lineTo(x + 5, y + this.sizes.HEIGHT_BODY + this.sizes.HEIGHT_BOTTOM);
        context.lineTo(this.sizes.WIDTH,       y + this.sizes.HEIGHT_BODY);
        context.lineTo(this.sizes.WIDTH,       y);
        context.strokeStyle = "black";
        context.fill();
        context.stroke();

    },

    _createGradient: function(context) {
        var grd = context.createLinearGradient(10,0,85,10);
        grd.addColorStop(0,"white");
        grd.addColorStop(1, figure.siloColor);
        return grd;
    },


    _parseType: function(type) {
        if (type == 'silo') {
            this.sizes = figure.siloSizes;
        } else if (type == 'tolva'){
            this.sizes = figure.tolvaSizes;
        } else {
            throw new Error('tolva o silo tiene que ser el type');
        }
    }

});
